<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="阿福易购">
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <!-- uc、qq浏览器 -->
    <meta name="screen-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <meta name="HandheldFriendly" content="true">
    <meta name="MobileOptimized" content="320">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <meta name="keywords" content="{{$SEO['keywords']}}"/>
    <meta name="description" content="{{$SEO['description']}}"/>
    <title>分类_{{$SEO['title']}}</title>
    <link rel="stylesheet" href="{{ asset('/build/css/app.min.css') }}">
</head>

<body ontouchstart="">
<header class="ui-header ui-header-stable  af-header">
    <ul class="ui-row-flex">
        <li class="ui-col ui-flex ui-flex-pack-start">
        </li>
        <li class="ui-col ui-flex ui-flex-pack-center">
            <h1>分类</h1>
        </li>
        <li class="ui-col ui-flex ui-flex-pack-end">
            <i class="ui-icon-search" data-href="/search"></i>
        </li>
    </ul>
</header>

<footer class="ui-footer af-footer" >
    <ul class="ui-tiled">
        <li data-href="/"><i class="ui-icon-hall"></i><div class="menu">首页</div></li>
        <li class="current" data-href="/cat"><i class="ui-icon-scan"></i><div class="menu">分类</div></li>
        <li data-href="/cart"><i class="ui-icon-cart"></i><div class="menu">购物车</div></li>
        <li data-href="/user"><i class="ui-icon-personal"></i><div class="menu">我的</div></li>
    </ul>
</footer>
@inject('pictureService','App\Interfaces\PictureService')
@inject('categoryService','App\Interfaces\CategoryService')
@inject('recommendPositionService','App\Interfaces\RecommendPositionService')
<div class="ui-container">
    <section class="ui-classify-menu">
        <ul class="ui-classify-menu-nav">
            @foreach($categoryService->top() as $key=>$cat)
            <?php if(empty($cat_id)) $cat_id = $firstCat->cat_id; ?>
            <li data-href="/cat?cat_id={{$cat->cat_id}}" @if($cat_id==$cat->cat_id) class="current" @else class="af-border-t" @endif>{{$cat->cat_name}}</li>
            @endforeach
        </ul>

        <ul class="ui-classify-content">
            @foreach($categoryService->top() as $key=>$cat)
            <?php if(empty($cat_id)) $cat_id = $firstCat->cat_id; ?>
            <li @if($cat_id==$cat->cat_id) class="current" @else class="ui-hot-cat" @endif>
                <div class="ui-classify-sub">
                    @foreach($categoryService->getChild($cat->cat_id) as $child)
                    <section class="ui-hot-cat">
                        <h4>{{$child->cat_name}}</h4>
                        <ul class="ui-row">
                            @foreach($categoryService->getChild($child->cat_id) as $childs)
                            <li data-href="/cat/{{$childs->cat_id}}?cat_id={{$childs->cat_id}}&page=1" class="ui-col ui-col-33">
                                <div class="ui-grid-trisect-img ui-cat-img">
                                    <span style="background-image:url('{{$pictureService::thumb($childs->cat_picture),400,400}}')"></span>
                                </div>
                                <div class="ui-cat-info">
                                    <h3 class="ui-nowrap">{{$childs->cat_name}}</h3>
                                </div>
                            </li>
                            @endforeach

                        </ul>
                    </section>
                    @endforeach

                </div>
            </li>
            @endforeach
        </ul>
    </section>
</div>
<script src="{{ asset('/build/lib/zepto.min.js') }}"></script>
<script src="{{ asset('/build/js/frozen.js') }}"></script>
<script src="{{ asset('/build/js/app.min.js') }}"></script>
</body>
</html>